<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>
<body>
<h3>自定义属</h3>
<p>
    标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作
</p>
<p>
    自定义属性： <br>
    在html5中推出来了专门的data-自定义属性 <br>
    在标签上一律以data-XXX <br>
    在DOM对象上一律以dataset对象方式获取
</p>
<p>
    说明: 这个自定义属性, 是标签的自定义属性
</p>
<hr>
<!--data- 开头的就是, 标签的自定义属性.  有的类似于id选择器-->
<div data-id="第1" data-是什么="不知道是什么" class="版心居中">1</div>

<div data-id="第2">2</div>
<div data-id="第3">3</div>
<div data-id="第4">4</div>
<div data-id="第5">5</div>
<p data-第几="第6">6</p>


<script>
    // 获取DOM元素
    const 元素 = document.querySelector('div') // 这里是第一div的, 没有使用ALL

    console.log(元素.dataset) // dataset 是集合, 输出的是这个元素里所有 自定义属性
    console.log(元素.dataset.id)  // "第1"
    console.log(元素.dataset.是什么)  // "不知道是什么"


    console.log('--------------------')
    // 获取DOM元素
    const 数组_元素 = document.querySelectorAll('div')

    console.log(数组_元素[3].dataset) // dataset 是集合, 输出的是这个元素里所有 自定义属性
    console.log(数组_元素[3].dataset.id)  // "第4"
    console.log(数组_元素[3].dataset.是什么)  // "undefined" ,因为没有这个属性 所有值不存在
</script>


</body>
</html>